<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>京东(JD.COM)-正品低价...</title>

  <!-- 引入标题的图标文件 -->
  <link rel="icon shortcut" href="img/favicon.ico" />

  <!-- 引入公共基础的CSS文件 -->
  <link rel="stylesheet" href="css/base.css" />

  <!-- 引入外部CSS文件 -->
  <link rel="stylesheet" href="css/index.css" />

 </head>
 <body>

	<!--  注释： 这里是顶部条
	 		Ctrl+/  快速注释 -->
	<div class="top"> 
		<div class="w"> 
			<!-- 左边部分 -->
			<div class="fl addr">
				<!-- i标签（斜体）和s标签（中划线）：避免通篇都是div 
					em, strong 加粗
				-->
				送至：长沙 <i><s>◇</s></i>
				
				<!-- 地址的下拉框 -->
				<ul class="sel">
					<li><a href="#">北京</a></li>
					<li><a href="#">上海</a></li>
					<li><a href="#">杭州</a></li>
					<li><a href="#">深州</a></li>
				</ul>
			</div>

			
			<!-- 右边部分: info登陆的信息 -->
			<div class="fr info">
				<!-- 右边的导航信息 -->
				<ul class="">
					<li>
						你好，请
						<a href="#">登陆</a>
					</li>
					<li>
						<a href="#" class="reg">免费注册</a>
					</li>
					<!-- 分割线 -->
					<li class="line"></li>
					<li><a href="#">我的订单</a></li>
					<!-- 分割线 -->
					<li class="line"></li>
					<li>
						<a href="#">我的京东</a>
						<i><s>◇</s></i> 
					</li>
					<!-- 分割线 -->
					<li class="line"></li>
					<li><a href="#">京东会员</a></li>
					<li><a href="#">企业采购</a></li>
					<!-- 分割线 -->
					<li class="line"></li>
					<li>
						<!-- 手机图片 -->
						<span class="phone"> </span>
						<a href="#">手机京东</a>
						<i><s>◇</s></i> 
					</li>
					<!-- 分割线 -->
					<li class="line"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- 广告栏 -->
	<div class="ad">
		<!-- 广告的图片,插入一张图片 -->
		<div class="ad-img w"> 
			
			<!-- 关闭按钮 -->
			<div class="close">×</div>
		</div>
	</div>

	<!-- 搜索栏 -->
	<div class="search w clearfix">
		<!-- logo -->
		<div class="logo">
		</div>

		<!-- 动图 -->
		<img class="fl dong" src="img/dong.gif" />
		
		<!-- 搜索框 -->
		<input type="text" class="word" placeholder="图书搜索"/>

		<!-- 搜索按钮 -->
		<div class="btn-search"> 搜索 </div>

		<!-- 购物车 -->
		<div class="car">
			<!-- 小图标 -->
			<span></span>
			俺的购物车
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<!-- 大于号 -->
			&gt;

			<!-- 数量:
				为了避免太多的div，换一个表示图标的结构：
					span, i, em, strong
			-->
			<i>8</i>
			
		</div>

	</div>


	<!-- 导航栏: 分类 -->
	<div class="cat clearfix">
		<!-- 居中样式: w -->
		<div class="w clearfix"> 
		
			<!-- 导航条 -->
			<ul>
				<li> <a href="#"> 服装城</a> </li>
				<li> <a href="#"> 美妆馆 </a> </li>
				<li> <a href="#"> 超市</a> </li>
				<li> <a href="#"> 全球购</a> </li>
				<li> <a href="#"> 闪购</a> </li>

				<!-- <span class="new"></span> 表示新的图标 -->
				<li> <a href="#"> 团购</a> <span class="new"></span> </li>
				<li> <a href="#"> 拍卖</a> </li>
				<li> <a href="#"> 金融</a> </li>
				<li> <a href="#"> 智能</a> </li>
			</ul>

			<!-- 广告 -->
			<img class="fr" src="img/bike.jpg" />
		</div>
	</div>


	<!-- 中间部分 -->
	<div class="main">
		<!-- 居中部分 -->
		<div class="w"> 
			<!-- 全部商品分类： 因为存在标题和描述，所以采用自定义列表更恰当 -->
			<dl>
				<dt> 全部商品分类 </dt>
				<dd> <a href="#">家用电器</a> <span>&gt;</span>
				
					<!-- 鼠标移到dd上时，显示这个子元素 -->
					<div class="list">子栏目列表</div>
				</dd>
				<dd> <a href="#">家用电器</a> <span>&gt;</span>
					<div class="list">子栏目列表2222</div></dd>
				<dd><a href="#">手机、数码、京东通信<span>></span></a></dd>
				<dd><a href="#">家用电器</a><span>&gt;</span></dd>
				<dd><a href="#">手机、数码、京东通信</a><span>&gt;</span></dd>
				<dd><a href="#">家用电器</a><span>&gt;</span></dd>
				<dd><a href="#">手机、数码、京东通信</a><span>&gt;</span></dd>
				<dd><a href="#">家用电器</a><span>&gt;</span></dd>
				<dd><a href="#">手机、数码、京东通信<span>></span></a></dd>
				<dd><a href="#">家用电器<span>></span></a></dd>
				<dd><a href="#">手机、数码、京东通信<span>></span></a></dd>
				<dd><a href="#">手机、数码、京东通信<span>></span></a></dd>
			</dl>
		</div>
	</div>

 </body>
</html>
